<template>
    <div class="">
        <Header></Header>
        <div class="main">
            <div class="body">
                <div class="items Breadcrumb">
                    <img src="/src/assets/icons/account/location.png" alt="">
                    <div class="items">
                        <p class="mLeft8 c99">Членский центр / </p>
                        <p class="mLeft8 c99">Настройки системы / </p>
                        <p class="mLeft8 c47">{{ menuList[indexOf].name }}</p>
                    </div>
                </div>
                <div class="flex">
                    <div class="body_left bCFF">
                        <div class="body_left_header items">
                            <div class="mLeft6 c33">Настройки системы</div>
                        </div>
                        <!-- 菜单 -->
                        <div class="items menu mTop20 c33" :class="indexOf == index ? 'menu_1' : ''"
                            v-for="(item, index) in menuList" @click="menuClick(index)">
                            <div class="mLeft8 menu_name ">{{ item.name }}</div>
                        </div>
                    </div>
                    <BaseInfo v-if="indexOf == 0"></BaseInfo>
                    <SecurityConfig v-else-if="indexOf == 1"></SecurityConfig>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" name="setting" setup>
import { ref, onMounted } from "vue";
import BaseInfo from "./components/baseInfo.vue";
import SecurityConfig from "./components/securityConfig.vue";
import useUserStore from '@/store/modules/user'

const userStore = useUserStore()
// 菜单列表静态资源
const menuList = ref([
    {
        name: 'Основные сведения'
    },
    {
        name: 'Параметры безопасности'
    },
    {
        name: 'О нас'
    },
    {
        name: 'Свяжитесь с нами'
    },
    {
        name: 'Очистить кэш'
    },
    {
        name: 'Обновление версии'
    }
])

const indexOf = ref(0)

onMounted(() => {
  userStore.getUserInfo()
})

const menuClick = (index: number) => {
    indexOf.value = index;
}

</script>
<script lang="ts">
import Header from '@/components/Header/Header.vue';//引入的头部的主键
import Tags from '@/components/Tags/Tags.vue';//引入的头部的主键

export default {
    name: 'Login',
    components: {
        Header,
        Tags
    }
}
</script>

<style lang="less" scoped>
.main {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #F6F6F6;
    padding: 16px 0 204px 0;

    .body {
        width: 1400px;

        .Breadcrumb {
            font-size: 16px;
            font-weight: 400;
            line-height: 16px;

            img {
                width: 24px;
                height: 24px;
            }
        }

        &_left {
            width: 196px;
            height: 484px;
            border-radius: 16px;
            padding: 20px 12px;

            &_header {
                font-size: 16px;
                line-height: 16px;
                border-bottom: 1px solid #EEEEEE;
                padding-bottom: 12px;
            }

            .menu_1 {
                background: #0070E9;
                color: #FFFFFF;
            }

            .menu {
                min-height: 32px;
                width: 100%;
                border-radius: 8px;

                &_name {
                    font-family: PingFang SC;
                    font-size: 14px;
                    font-weight: 400;
                    line-height: 14px;
                }
            }
        }

        &_right {
            width: 1124px;
            height: 951px;
            border-radius: 16px;
            padding: 20px;

            &_header {
                font-size: 16px;
                line-height: 16px;
                border-bottom: 1px solid #EEEEEE;
                padding-bottom: 12px;
            }

            ::v-deep .el-input__inner {
                height: 48px;

            }

            .tag {
                background: #FFF6EF;
                font-size: 14px;
                font-weight: 400;
                line-height: 14px;
                padding: 8px;
            }

            .account {
                .title {
                    font-size: 16px;
                    font-weight: 400;
                    line-height: 16px;
                }

                &_name {
                    &_input {
                        width: 580px;
                    }

                    &_input_1 {
                        width: 360px;
                    }

                    &_input_2 {
                        width: 520px;
                    }

                    &_input_3 {
                        width: 229px;

                        ::v-deep .el-input__wrapper {
                            box-shadow: none;
                        }
                    }

                    &_tip {
                        width: 221px;
                        font-size: 16px;
                        font-weight: 400;
                        line-height: 16px;
                    }

                    &_img {
                        width: 24px;
                        height: 24px;
                    }
                }

                &_tip {
                    font-family: PingFang SC;
                    font-size: 14px;
                    font-weight: 400;
                    line-height: 14px;
                    color: #FF2E2E;
                }

                &_next {
                    width: 164px;
                    height: 48px;
                    border-radius: 8px;
                    font-size: 16px;
                    font-weight: 400;
                    line-height: 16px;
                    background: #0070E9;
                }

                &_sex {
                    &_title {
                        font-family: PingFang SC;
                        font-size: 16px;
                        font-weight: 400;
                        line-height: 16px;
                        text-underline-position: from-font;
                        text-decoration-skip-ink: none;
                    }
                }

                &_url {
                    img {
                        width: 64px;
                        height: 64px;
                        border-radius: 50%;
                    }
                }

                &_submit {
                    width: 122px;
                    height: 48px;
                    border-radius: 8px;
                    background: #0070E9;
                    font-size: 16px;
                    font-weight: 400;
                    line-height: 16px;
                }
            }
        }

    }
}
</style>
